<template>
  <div>
        <h1>编辑个人信息</h1>
        <el-form ref="form" :model="form" label-width="70px" style="width: 500px;margin: auto;">
            <el-form-item label="姓名" style="width: 500px;">
                <el-input v-model="form.uname" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证">
                <el-input v-model="form.idCard" placeholder="请输入身份证"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.gender">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="生日">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="日期选择" v-model="form.birthday" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <div class="demo-type">
                <el-form-item label="头像">
                <el-avatar shape="circle" :size="100">
                    <img :src="form.headImage" alt="图片不存在" />
                </el-avatar>
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="http://localhost:8000/file-serv/upload"
                    name="files"
                    :on-success="handleSuccess"
                    :file-list="fileList"
                    :auto-upload="true"
                    :headers="headrs"
                >
                <el-button slot="trigger" size="small" type="primary" @click="aa"><i class="el-icon-upload el-icon--right">选取文件</i></el-button>
                </el-upload>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
        </el-form>
  </div>
</template>

<script>
import {loadWorkerInfo,updWorkerInfos} from "@/api/workerInfo.js"
export default {
        data(){
            return{
                form:{
                    uname:"",
                    gender:"",
                    birthday:"",
                    idCard:"",
                    headImage:""
                },
                headrs:{
                    "Authorization":sessionStorage.getItem("token")
                }
            }

        },
        mounted(){
            this.loadWorkerInfos();
        },
        methods:{
            loadWorkerInfos(){
                loadWorkerInfo().then(res=>{
                    if(res.data.code==200){
                       this.form = res.data.data
                    }
                })
            },
            aa(){
                //点击保存的时候会执行此函数，该函数会将前端文件传递给服务器，促使服务器完成文件上传
                this.$refs.upload.submit();
            },
            //文件上传成功后会自动调用这个函数，data:服务器端响应回来的数据
            handleSuccess(data){//代表响应回来的文件的url
                this.form.headImage=data;//将url设置到form中
                //向服务器发请求，将包含了url和修改后的信息的用户对象传递给服务器，服务器进行数据库保存
                
            },
            onSubmit(){
                updWorkerInfos(this.form).then(res=>{
                    if(res.data.code==200){
                        this.$message({
                            type:"success",
                            message:"修改成功"
                        })
                        this.loadWorkerInfos();
                    }
                })
            }

        }
}
</script>

<style>

</style>